import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
//引入css
import "./detail.css"
// 引入仓库actions
import { actions, getDetail } from "../../store/modules/detail"

class Detail extends Component {
    componentDidMount() {
        let { detail: { reqDetail } } = this.props
        let id = this.props.match.params.id
        reqDetail(id)
    }
    render() {
        let { detailGood,detail:{reqShopAdd} } = this.props
        return (
            <div className="detail">
                <div className="top">
                    <h3>详情</h3>
                </div>
                <div className="main">
                    <div className="img"><img src={detailGood.img} alt=""/></div>
                    <div>限时<span className="price">￥{detailGood.price}</span><span className="market_price">￥{detailGood.market_price}</span></div>
                    <div className="goodsname">{detailGood.goodsname}</div>
                    <div className="description">{detailGood.description}</div>
                </div>
                <div className="bottom">
                    <div className="shop">购物车</div>
                    <div className="addshop" onClick={()=>reqShopAdd(this.props.match.params.id)}>加入购物车</div>
                    <div className="buy">立即购买</div>
                </div>
            </div>
        );
    }
}

//导入数据
let mapStateToProps = (state) => ({
    detailGood: getDetail(state)
});

//导入所有方法
let mapDispatchToProps = (dispatch) => ({ detail: bindActionCreators(actions, dispatch), });

//将数据和方法给this.props
export default connect(mapStateToProps, mapDispatchToProps)(Detail);